Page({
  onReady: function () {
    this.ctx = wx.createCanvasContext('myCanvas', this);
    this.startRain();
  },
  startRain: function () {
    const that = this;
    const canvasWidth = wx.getSystemInfoSync().windowWidth;
    const canvasHeight = wx.getSystemInfoSync().windowHeight;
    const fontSize = 16;
    const columns = Math.floor(canvasWidth / fontSize);
    const drops = [];

    for (let i = 0; i < columns; i++) {
      drops.push(0);
    }

    function draw() {
      that.ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 清除画布
      that.ctx.setFillStyle('rgba(0,0,0,0.05)'); // 设置填充样式
      that.ctx.fillRect(0, 0, canvasWidth, canvasHeight); // 绘制黑色遮罩层

      that.ctx.font = `${fontSize}px sans-serif`;
      that.ctx.setFillStyle('green'); // 设置文字颜色

      for (let i = 0; i < drops.length; i++) {
        const index = Math.floor(Math.random() * 10); // 随机生成0-9的数字
        const text = index.toString();
        that.ctx.fillText(text, i * fontSize, drops[i] * fontSize);

        if (drops[i] * fontSize > canvasHeight && Math.random() > 0.98) {
          drops[i] = 0;
        }
        drops[i]++;
      }

      that.ctx.draw();
      setTimeout(draw, 60); // 循环绘制
    }

    draw(); // 启动绘制函数
  }
});